<template>
    <div class="kanban">
        <el-form :model="form" class="app-search" ref="searchForm">
            <el-select class="app-search-item" clearable filterable placeholder="商户" size="medium"
                       style="width:100px;" v-model="form.merchantId"
            >
                <el-option :label="item.name" :value="item.id" v-for="item in merchants"/>
            </el-select>
            <el-input class="app-search-item" clearable placeholder="请输入关键字查询" size="medium"
                      style="width:220px;"
                      v-model="form.keywords"
            />
            <el-select class="app-search-item" clearable filterable placeholder="状态" size="medium"
                       style="width:130px;" v-model="form.status"
            >
                <el-option label="审核中" value="APPROVING"/>
                <el-option label="已审核" value="REJECTED"/>
                <el-option label="已完成" value="COMPLETED"/>
            </el-select>
            <el-button @click="fetchData(1)" class="app-search-item" icon="el-icon-search" size="medium"
                       type="primary"
            >
                搜索
            </el-button>
            <!--<el-button @click="openAddDialog()" class="app-search-item" icon="el-icon-search" size="medium"
                       type="success"
            >
                新增
            </el-button>-->
        </el-form>
        <el-table :data="items" style="width: 100%">
            <el-table-column label="商户名称" prop="merchantName" width="100">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.merchantName}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="业务编号" prop="bizNo">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.bizNo}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="提现金额" prop="amount" width="80">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.amount | yuan}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="扣除税点后" prop="amount" width="80">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.realAmount | yuan}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="变更后" prop="merchantBalance" width="80">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.merchantBalance | yuan}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="商户备注" prop="remark">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.remark}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="status" width="80">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.status | withDrawApplyStatusText}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="平台审核备注" prop="approveRemark">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.approveRemark}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" class-name="status-col" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="openApproveDialog(scope.row.id, true)" size="mini" type="success"
                               v-if="scope.row.status==='APPROVING'">
                        通过
                    </el-button>
                    <el-button @click="openApproveDialog(scope.row.id, false)" size="mini" type="danger"
                               v-if="scope.row.status==='APPROVING'">
                        拒绝
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination :page-size="form.size" :total="form.total" @current-change="fetchData"
                           layout="prev, pager, next"
                           width="1000">
            </el-pagination>
        </div>
        <!-- dialog弹窗 -->
        <el-dialog :visible.sync="approveForm.visible" title="审批" width="800px">
            <el-form :model="approveForm" :rules="approveFormRules" label-width="120px" ref="approveForm">
                <el-form-item :required="true" label="转账说明：" prop="approveRemark" v-if="approveForm.approve">
                    <el-input :rows="3" placeholder="请详细备注已支付说明" type="textarea" v-model="approveForm.approveRemark"/>
                </el-form-item>
                <el-form-item :required="true" label="拒绝原因：" prop="approveRemark" v-else>
                    <el-input :rows="3" placeholder="请详细备注拒绝原因" type="textarea" v-model="approveForm.approveRemark"/>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="approve" type="primary">确定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    export default {
        name: 'Merchant',
        info: {},
        data() {
            return {
                form: {
                    page: 1,
                    size: 10,
                    total: 0,
                    merchantId: '',
                    status: '',
                    keyword: ''
                },
                merchants: [],
                items: [],
                editRules: {
                    alias: [{required: true, message: '此项不能为空', trigger: 'blur'}],
                    commission: [
                        {required: true, message: '此项不能为空', trigger: 'blur'},
                        {
                            pattern: /^(?!0)\d{1,3}$/,
                            message: '必须是 1-999 之间的数',
                            trigger: 'blur'
                        }
                    ]
                },
                approveForm: {
                    id: '',
                    approve: true,
                    approveRemark: '',
                    visible: false,
                    placeholder: ''
                },
                approveFormRules: {
                    approveRemark: [{required: true, message: '此项不能为空', trigger: 'blur'}]
                }
            }
        },
        methods: {
            fetchMerchants() {
                this.$fetch('/admin/merchant/list?page=1&size=9999').then(res => {
                    if (res.code === 0) {
                        this.merchants = res.data.records
                    } else {
                        this.$message.error(res.errorMsg)
                    }
                })
            },
            fetchData(page) {
                if (page) {
                    this.form.page = page
                }
                this.$fetch('/admin/withdraw/list?merchantId=' + this.form.merchantId + '&keyword=' + this.form.keyword + '&status=' + this.form.status + '&page=' + this.form.page)
                    .then(res => {
                        if (res.code === 0) {
                            this.items = res.data.records
                        } else {
                            this.$message.error(res.errorMsg)
                        }
                    })
            },
            openApproveDialog(id, approve) {
                this.approveForm.id = id;
                this.approveForm.approve = approve;
                this.approveForm.visible = true
            },
            approve() {
                this.$refs['approveForm'].validate((valid) => {
                    if (!valid) {
                        this.$message({type: 'error', message: '请输入正确的数据!'});
                        return false
                    }
                    const data = {
                        id: this.approveForm.id,
                        approve: this.approveForm.approve,
                        remark: this.approveForm.approveRemark
                    };
                    if (this.approveForm.approve) {
                        this.$confirm('审批通过后将扣除商户余额, 请确认已根据商户备注完成转账等操作', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$put('/admin/withdraw/approve', data)
                                .then(res => {
                                    if (res.code === 1) {
                                        this.$message({type: 'error', message: res.errorMsg});
                                    } else {
                                        this.$message({type: 'success', message: '操作成功'});
                                        this.closeApproveDialog();
                                        this.fetchData()
                                    }
                                })
                        })
                    } else {
                        this.$put('/admin/withdraw/approve', data)
                            .then(res => {
                                if (res.code === 1) {
                                    this.$message({type: 'error', message: res.errorMsg});
                                } else {
                                    this.$message({type: 'success', message: '操作成功'});
                                    this.closeApproveDialog();
                                    this.fetchData()
                                }
                            })
                    }

                })
            },
            closeApproveDialog() {
                this.approveForm.visible = false
            },
        },
        mounted() {
            this.fetchMerchants();
            this.fetchData()
        }
    }
</script>
<style>
    .block {
        display: -webkit-flex;
        display: flex;
        justify-content: flex-end;
        padding: 15px 30px;
    }

    .kanban {
        padding: 25px 25px;
    }

    .el-image-viewer__img {
        width: 120px;
        height: 120px;
    }

</style>
